<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link type="text/css" th:href="@{/css/theme.css}" rel="stylesheet">
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>
    <main class="main">
        <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen">
            <div style="padding: 20px">
                <button id="task-btn-1" type="button" class="btn btn-outline-primary">任务一</button>
                <button id="task-btn-2" type="button" class="btn btn-outline-primary">任务二</button>
                <button id="task-btn-3" type="button" class="btn btn-outline-primary">任务三</button>
                <button id="task-btn-4" type="button" class="btn btn-outline-primary">任务四</button>
                <button id="task-btn-5" type="button" class="btn btn-outline-primary">任务五</button>
                <button id="task-btn-6" type="button" class="btn btn-outline-primary">任务六</button>
            </div>
            <div id="main" style="width: 100%;height:750px;"></div>
        </section>
    </main>
    <div th:replace="~{common/footer :: footer}"></div>
</body>
<script th:src="@{/js/echarts.min.js}"></script>
<script>

    var task1 = {
        title: ['查智超','万润涛','熊子阳','万志强','马志鹏','方进','刘祥松','张友根','杨涛','金超','彭鸿鑫','谢志诚','石文刚','潘俊','陈玉尚','沈凡江','叶徵福','肖文欣','廖政','肖海平','李鑫','江涛','邱福杨','曹明轩','王丽君','何明欣','赵瑞杰','刘玮','胡涵玥','黄伟和'],
        capacity_before: [56,64,51,55,62,51,60,49,57,53,56,51,60,58,60,60,56,57,52,60,58,63,62,61,60,56,59,57,52,55],
        capacity_after: [63,65,62,63,65,64,65,64,63,64,65,64,67,63,63,63,64,66,63,66,63,64,62,65,66,64,63,63,63,63],
        increment: [7,1,11,8,3,13,5,15,6,11,9,13,7,5,3,3,8,9,11,6,5,1,0,4,6,8,4,6,11,8]
    }

    var task2 = {
        title: ['查智超','万润涛','熊子阳','万志强','马志鹏','方进','刘祥松','张友根','杨涛','金超','彭鸿鑫','谢志诚','石文刚','潘俊','陈玉尚','沈凡江','叶徵福','肖文欣','廖政','肖海平','李鑫','江涛','邱福杨','曹明轩','王丽君','何明欣','赵瑞杰','刘玮','胡涵玥','黄伟和'],
        capacity_before: [63,65,62,63,65,64,65,64,63,64,65,64,67,63,63,63,64,66,63,66,63,64,62,65,66,64,63,63,63,63],
        capacity_after: [72,70,69,71,71,70,73,72,69,73,73,71,74,68,70,70,70,74,70,72,69,71,68,73,72,72,70,70,68,70],
        increment: [9,5,7,8,6,6,8,8,6,9,8,7,7,5,7,7,6,8,7,6,6,7,6,8,6,8,7,7,5,7]
    }

    var task3 = {
        title: ['查智超','万润涛','熊子阳','万志强','马志鹏','方进','刘祥松','张友根','杨涛','金超','彭鸿鑫','谢志诚','石文刚','潘俊','陈玉尚','沈凡江','叶徵福','肖文欣','廖政','肖海平','李鑫','江涛','邱福杨','曹明轩','王丽君','何明欣','赵瑞杰','刘玮','胡涵玥','黄伟和'],
        capacity_before: [72,70,69,71,71,70,73,72,69,73,73,71,74,68,70,70,70,74,70,72,69,71,68,73,72,72,70,70,68,70],
        capacity_after: [81,76,76,78,78,76,79,77,77,80,80,78,83,74,77,79,77,79,77,78,75,79,76,82,80,80,76,78,76,78],
        increment: [9,6,7,7,7,6,6,5,8,7,7,7,9,6,7,9,7,5,7,6,6,8,8,9,8,8,6,8,8,8]
    }

    var task4 = {
        title: ['查智超','万润涛','熊子阳','万志强','马志鹏','方进','刘祥松','张友根','杨涛','金超','彭鸿鑫','谢志诚','石文刚','潘俊','陈玉尚','沈凡江','叶徵福','肖文欣','廖政','肖海平','李鑫','江涛','邱福杨','曹明轩','王丽君','何明欣','赵瑞杰','刘玮','胡涵玥','黄伟和'],
        capacity_before: [81,76,76,78,78,76,79,77,77,80,80,78,83,74,77,79,77,79,77,78,75,79,76,82,80,80,76,78,76,78],
        capacity_after: [87,85,81,85,84,83,86,83,84,86,85,85,87,81,85,83,84,85,84,84,81,88,84,88,85,87,82,86,84,85],
        increment: [6,9,5,7,6,7,7,6,7,6,5,7,4,7,8,4,7,6,7,6,6,9,8,6,5,7,6,8,8,7]
    }

    var task5 = {
        title: ['查智超','万润涛','熊子阳','万志强','马志鹏','方进','刘祥松','张友根','杨涛','金超','彭鸿鑫','谢志诚','石文刚','潘俊','陈玉尚','沈凡江','叶徵福','肖文欣','廖政','肖海平','李鑫','江涛','邱福杨','曹明轩','王丽君','何明欣','赵瑞杰','刘玮','胡涵玥','黄伟和'],
        capacity_before: [87,85,81,85,84,83,86,83,84,86,85,85,87,81,85,83,84,85,84,84,81,88,84,88,85,87,82,86,84,85],
        capacity_after: [91,89,87,90,88,88,90,90,88,90,91,88,90,87,89,86,89,92,88,89,87,92,89,92,88,90,87,90,88,90],
        increment: [4,4,6,5,4,5,4,7,4,4,6,3,3,6,4,3,5,7,4,5,6,4,5,4,3,3,5,4,4,5]
    }
    var task6 = {
        title: ['查智超','万润涛','熊子阳','万志强','马志鹏','方进','刘祥松','张友根','杨涛','金超','彭鸿鑫','谢志诚','石文刚','潘俊','陈玉尚','沈凡江','叶徵福','肖文欣','廖政','肖海平','李鑫','江涛','邱福杨','曹明轩','王丽君','何明欣','赵瑞杰','刘玮','胡涵玥','黄伟和'],
        capacity_before: [91,89,87,90,88,88,90,90,88,90,91,88,90,87,89,86,89,92,88,89,87,92,89,92,88,90,87,90,88,90],
        capacity_after: [95,94,93,93,93,93,94,94,94,93,95,91,95,92,94,90,93,96,94,94,93,95,93,96,93,95,90,93,94,93],
        increment: [4,5,6,3,5,5,4,4,6,3,4,3,5,5,5,4,4,4,6,5,6,3,4,4,5,5,3,3,6,3]
    }

    var data;

    // 赋初值
    data = task1;

    function getTableLine(num) {
        var list = [];
        var bottom = 122;
        var height = 20;
        for (var i = 0; i < num; i++) {
            list.push({
                type: 'line',
                bottom: bottom - i * height,
                right: 80,
                style: {
                    fill: '#333'
                },
                shape: {
                    x1: 0,
                    y1: 0,
                    x2: 3200,
                    y2: 0
                }

            });
        }
        return list;
    }
    var lineList = getTableLine(4);

    function obtainOptionData(myData) {
        option = {
            title: [{
                text: ' \n\n输入\n输出\n增值',
                bottom: 56,
                left: 20,
                textStyle: {
                    lineHeight: 20,
                    fontSize: 13,
                    fontWeight: 'normal',
                    formatter: function(value) {
                        return '{table|' + value + '}';
                    },
                    rich: {
                        table: {
                            align: 'center'
                        }
                    }
                }
            }],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            legend: {
                //data: ['能力增值', '输入', '输出']
            },
            grid: {
                bottom: 150,
                left: 80,
                right: 80
            },
            dataZoom: {
                show: true,
                start: 0,
                end: 120,
                maxSpan: 120
                // zoomLock: true
            },
            xAxis: [{
                type: 'category',
                //boundaryGap: true,
                data: myData.title,
                axisTick: {
                    //length: 108,
                    alignWithLabel: true
                },
                axisLabel: {
                    formatter: function(value, index) {
                        var indexNum = 0;
                        for(var i = 0; i <= 31; i++){
                            if(value === myData.title[i]) {
                                indexNum = i;
                            }
                        }
                        return '{table|' + value +
                            '}\n{table|' + myData.capacity_before[indexNum] +
                            '}\n{table|' + myData.capacity_after[indexNum] +
                            '}\n{table|' + myData.increment[indexNum] + '}';
                    },
                    interval: 0,
                    rich: {
                        table: {
                            lineHeight: 20,
                            align: 'center'
                        }
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                scale: true,
                minInterval: 1,
                name: '数量',
                splitLine: {
                    show: false
                },
                min: function(v) {
                    return Math.max((v.min - 10), 0);
                }
            }, {
                type: 'value',
                scale: true,
                name: '分数',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                name: '增值',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                },
                yAxisIndex: 0,
                data: myData.increment
            }, {
                name: '增值前',
                type: 'line',
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                },
                yAxisIndex: 1,
                data: myData.capacity_before
            }, {
                name: '增值后',
                type: 'line',
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                },
                yAxisIndex: 1,
                data: myData.capacity_after
            }],
            graphic: lineList
        };
        return option;
    }

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    $("#task-btn-1").click(function () {
        var opt = obtainOptionData(task1);
        myChart.clear();
        myChart.setOption(opt);
    });

    $("#task-btn-2").click(function () {
        var opt = obtainOptionData(task2);
        myChart.clear();
        myChart.setOption(opt);
    });

    $("#task-btn-3").click(function () {
        var opt = obtainOptionData(task3);
        myChart.clear();
        myChart.setOption(opt);
    });

    $("#task-btn-4").click(function () {
        var opt = obtainOptionData(task4);
        myChart.clear();
        myChart.setOption(opt);
    });

    $("#task-btn-5").click(function () {
        var opt = obtainOptionData(task5);
        myChart.clear();
        myChart.setOption(opt);
    });

    $("#task-btn-6").click(function () {
        var opt = obtainOptionData(task6);
        myChart.clear();
        myChart.setOption(opt);
    });

    // 默认显示任务1
    $("#task-btn-1").click();
</script>
</html>